<template>
  <div class="box">
    <h1>UNI-ADMIN</h1>
    <el-form :model="from" class="box1">
      <el-form-item label="账号：" prop="name">
        <el-input
          v-model="from.name"
          type="text"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="name">
        <el-input
          v-model="from.pass"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-button type="primary" class="btn" @click="login">登录</el-button>
      <el-button class="btn" @click="reset">重置</el-button>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      from: {
        name: "",
        pass: "",
      },
    };
  },
  methods: {
    // 登录
    login() {
      this.$axios
        .post("http://ceshi5.dishait.cn/admin/login", {
          username: this.from.name,
          password: this.from.pass,
        })
        .then((res) => {
          localStorage.setItem("token", res.data.data.token);
          this.$router.push({path:"/home"})
          this.$message({
            showClose: true,
            message: "登录成功",
            type: "success",
          });
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: "账号密码错误",
            type: "error",
          });
        });
    },
    // 重置
    reset() {
      this.from.name = "";
      this.from.pass = "";
    },
  },
};
</script>
<style  scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 460px;
  height: 280px;
  margin: 0 auto;
  margin-top: 160px;
  background: lightcyan;
}
h1 {
  text-align: center;
  line-height: 50px;
}
.box1 {
  width: 360px;
  height: 220px;
  margin: 0 auto;
}
.btn {
  width: 60px;
  height: 30px;
  margin-top: 20px;
}
</style>